<template>
	<view class="nav_outer">
		<view class="dateTop">
			<u-calendar
				v-model="show"
				@change="changeTime"
				:max-date="getTime(0)"
				mode="range"
			></u-calendar>
			<view @click="show = true" class="date_new"
				><view>{{ startDate == '' ? getTime(-7) : startDate }}</view
				><view style="background-color: #fff">至</view
				><view>{{ endDate == '' ? getTime(0) : endDate }}</view></view
			>
		</view>
		<!-- 信息 -->
		<!-- <view class="cost_qingdan">
			<view class="cost_content"
				>张三
				<text style="color: #9a9a9a">【就诊卡号：00466644824】</text></view
			>
		</view> -->
		<!-- 有记录 -->
		<view v-if="record">
			<view>{{ dataList }}</view>
		</view>
		<!-- 无记录显示 -->
		<view v-else>
			<u-empty
				text="暂无数据"
				icon-size="200"
				icon-color="#0089ff8c"
				color="#c0c4cc"
				mode="history"
				margin-top="330"
			></u-empty>
		</view>
		<view class="safe"></view>
	</view>
</template>

<script>
import getTime from '../../utils/time'
export default {
	data() {
		return {
			show: false,
			record: false,
			startDate: '',
			endDate: '',
			dataList: '',
		}
	},
	created() {
		console.log(getTime(-7), getTime(0))
	},
	onload() {},
	onReady() {
		if (this.dataList == '') {
			this.record = false
		} else {
			this.record = true
		}
	},
	methods: {
		getTime,
		changeTime(e) {
			this.startDate = e.startDate
			this.endDate = e.endDate
			console.log(e, '日期')
		},
	},
}
</script>

<style lang="scss">
page {
	background-color: #ececec;
}
// .nav_outer {
// 	box-sizing: border-box;
// 	padding-bottom: 68rpx;
// 	padding-bottom: constant(safe-area-inset-bottom);
// 	padding-bottom: env(safe-area-inset-bottom);
// }
.date_new {
	border-width: 1px;
	border-color: #5690fb;
	border-style: dashed;
	padding: 10rpx 40rpx;
	margin-top: 15rpx;
	border-radius: 10rpx;
	background-color: #ffffff;
	color: #5690fb;
	font-size: 32rpx;
	/* display: inline-block; */
	text-align: center;
	display: flex;
	view {
		flex: 1;
	}
}
.cost_qingdan {
	padding: 0 40rpx;
	margin-top: 20rpx;
	.cost_content {
		background-color: #fff;
		padding: 20rpx;
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>